<template>
  <div id="box">
    <div id="pagehead">
      <div id="pageheaddiv"></div>
      <span id="pageheadspan">私教管理</span>
      <!-- <el-button
        @click="exit"
        id="pageheadbtn"
        type="primary"
        icon="el-icon-user"
        circle
      ></el-button> -->
    </div>
    <div id="content">
      <div id="contenthead">
        <span id="contentspan">课程添加编辑</span>
      </div>

      <div id="addform">
        <el-form
          :inline="true"
          ref="data"
          :model="data"
          label-width="120px"
          class="demo-form-inline"
          id="addformlist"
        >
          <div id="coursename">
            <el-form-item label="课程名称：">
              <el-input v-model="data.name" placeholder="请输入课程名称"></el-input>
            </el-form-item>
          </div>

          <span id="photospan">课程图片：</span>

          <el-upload action="/gym/uploadImage" list-type="picture-card" :auto-upload="true" name="image" :on-success="uploadimg">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />

              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

          <div id="videoaddress">
            <el-form-item label="添加视频地址：">
              <el-input
                v-model="data.address"
                placeholder="仅支持腾讯视频"
              ></el-input>
            </el-form-item>
          </div>

          <div id="coursetime">
            <el-form-item label="课程时长：">
              <el-input v-model="data.duration" placeholder="请输入数字"></el-input>
            </el-form-item>
          </div>

          <div id="courselimit">
            <el-form-item label="每日课时上限：">
              <el-input v-model="data.maxcourse" placeholder="请输入数字"></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="教练：">
              <el-select v-model="data.coach" placeholder="请选择教练">
                <el-option v-for="(v,i) in coacharr" :label="v.name" :value="v.id" :key="i"></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="课时费：">
              <el-input v-model="data.fee1" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-input v-model="data.yuan1" placeholder="元"></el-input>
            </el-form-item>
            <span>是否体验：</span>
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </div>

          <div id="coursefee2">
            <el-form-item label="">
              <el-input v-model="data.fee2" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-input v-model="data.yuan2" placeholder="元"></el-input>
            </el-form-item>
            <span>是否体验：</span>
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </div>

          <div id="coursefee2">
            <el-form-item label="">
              <el-input v-model="data.fee3" placeholder="请输入数字"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-input v-model="data.yuan3" placeholder="元"></el-input>
            </el-form-item>
            <span>是否体验：</span>
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">添加</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="课程备注：">
              <el-input v-model="data.remarks" placeholder="请输入备注"></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="课程标签：">
              <el-input v-model="msg" placeholder="请输入标签名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addtag">添加</el-button>
            </el-form-item>

            <div id="coursetagdiv">
              <ul>
                <li v-for="(v,i) in data.arr" :key="i">{{ v }} <a @click="delarr(i)" href="javascript:;">x</a></li>
              </ul>
            </div>
            <span id="tagspan">注：单个标签限6个字，最多三个标签</span>
          </div>

          <div id="introducediv">
            <el-form-item label="课程介绍：" prop="desc">
              <el-input resize="none" type="textarea" v-model="data.introduce"></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="排序：">
              <el-input v-model="data.sort" placeholder="请输入数字"></el-input>
            </el-form-item>
          </div>

          <div id="btnend">
            <el-form-item>
              <el-button type="primary" @click="add">保存</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      coacharr:[],
      photourl: "",
      radio: "1",
      msg: "",
      data: {
        name: "",
        address: "",
        duration: "",
        maxcourse: "",
        coach: "",
        fee1: '',
        yuan1: '',
        fee2: '',
        yuan2: '',
        fee3: '',
        yuan3: '',
        remarks: "",
        tag: "",
        introduce: "",
        sort: "",
        arr: [],
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      rules: {
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleRemove(file) {
      console.log(file);
      file.url='';
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    uploadimg(response, file, fileList){
      console.log(response, file, fileList);
      this.photourl=response.data;
    },
    addtag() {
      this.data.arr.push(this.msg);
      this.msg = "";
    },
    add() {
      this.$axios({
        url: "/gym/tutorCourses/add",
        method: "post",
        dataType:"json",
        data: {
          name: this.data.name,
          image: this.photourl,
          url: this.data.address,
          coursesTime: this.data.duration,
          upperLimit: this.data.maxcourse,
          coachId: this.data.coach,
          lessonTime: this.data.fee1,
          lessonMoney: this.data.yuan1,
          remarks: this.data.remarks,
          tags: this.data.arr.toString(),
          description: this.data.introduce,
          sortBy: this.data.sort,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("添加成功！");
        } else {
          this.$message.error("添加失败！");
        }
        (this.data.name = ""),
        (this.photourl=''),
        (this.data.address = ""),
        (this.data.duration = ""),
        (this.data.maxcourse = ""),
        (this.data.coach = ""),
        (this.data.fee1 = 0),
        (this.data.yuan1 = 0),
        (this.data.fee2 = 0),
        (this.data.yuan2 = 0),
        (this.data.fee3 = 0),
        (this.data.yuan3 = 0),
        (this.data.remarks = ""),
        (this.data.tag = ""),
        (this.data.introduce = ""),
        (this.data.sort = ""),
        (this.data.arr = []);
      }).catch((rej)=>{
        this.$message.error('添加失败！');
      })
    },
    exit() {
      window.location.href = "";
    },
    delarr(index){
      this.data.arr.splice(index,1);
    },
    getCon(){
      this.$axios({
        url:'/gym/coach/all',
        type:"post",
        dataType:"json",
      }).then((res)=>{
        console.log(res);
        if(res.data.code==200){
        this.coacharr=res.data.data;
        }
      })
    }
  },
  mounted(){
    this.getCon();
  }
};
</script>
<style scoped lang="less">
a{
  color: rgb(0, 204, 255);
  text-decoration: none;
}
#box {
  border-radius: 6px;
  overflow: hidden;
}
#pagehead {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #000, #fff);
}
#pageheaddiv {
  width: 4px;
  height: 30px;
  background: #409eff;
  float: left;
  margin-top: 5px;
  margin-left: 5px;
}
#pageheadspan {
  color: #fff;
  float: left;
  line-height: 40px;
  font-weight: bold;
  margin-left: 5px;
}
#pageheadbtn {
  float: right;
  margin-right: 50px;
  background: transparent;
  color: #000;
}
#content {
  border: 1px solid #999;
  width: 95%;
  margin-left: 25px;
  margin-top: 80px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
#contenthead {
  width: 100%;
  height: 40px;
  background: rgb(184, 180, 180);
}
#contentspan {
  float: left;
  line-height: 40px;
  margin-left: 20px;
}
#addformlist {
  text-align: left;
}
#photospan {
  float: left;
  margin-top: 1px;
  margin-left: 25px;
  font-size: 15px;
  color: #777;
  padding: 10px;
}
#coursename {
  margin-top: 30px;
}
#videoaddress {
  margin-top: 20px;
}
#coursetime {
  margin-top: 1px;
}
#courselimit {
  margin-top: 1px;
}
#coursefee2 {
  margin-left: 120px;
}
#coursetagdiv {
  float: right;
  margin-right: 200px;
  width: 400px;
  height: 40px;
  overflow: hidden;
  ul {
    li {
      list-style: none;
      display: block;
      width: 100px;
      height: 30px;
      float: left;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;
      border: 1px solid rgb(0, 204, 255);
      border-radius: 5px;
      margin-top: 5px;
      font-size: 14px;
    }
  }
}
#btnend {
  margin-left: 120px;
}
#tagspan {
  font-size: 14px;
  color: #888;
  margin-left: 120px;
}
#introducediv {
  margin-top: 30px;
}
</style>